<template>
  <div style="background-color:rgb(36, 36, 36)">
    <div class="w1" >
      <div class="fl">
        <div class="lll">
          <a href="./html/info.html"><div class="al mb20" style="height: 410px;">
              <div class="aa1">
                  <img src="@/assets/images/2.png">
              </div>
              <h1>Qian Miaomiao</h1>
              <i>一个不合格的程序员</i>
              <div class="aa2">
                  <div>
                      <a href="#">
                          <p>文章</p>
                          <h2>23</h2>
                      </a>
                  </div>
                  <div>
                      <router-link to="/classify">
                          <p>分类</p>
                          <h2>8</h2>
                      </router-link>
                  </div>
                  <div>
                      <a href="#">
                          <p>错误集</p>
                          <h2>16</h2>
                      </a>
                  </div>
              </div>
              <a href="https://gitee.com/miaomiaos" target="_blank"><button>我的git</button></a>
              <div class="aa3">
                  <a href="https://gitee.com/miaomiaos" target="_blank" class="iconfont">&#xe63e;</a>
                  <a href="https://home.cnblogs.com/" target="_blank" class="iconfont">&#xe60e;</a>
                  <a href="https://i.csdn.net/#/user-center/profile?spm=1000.2115.3001.5111" target="_blank" class="iconfont">&#xe69e;</a>
              </div>
          </div></a>
          <div class="bl mb20" style="height: 480px;">
              <div class="bb1">
                  <span class="iconfont">&#xe613;</span>
                  <i>最新文章</i>
              </div>
              <div class="bb5">
                  <a href="#"><img src="@/assets/images/7.png"></a>
                  <div class="fd">
                      <a href="#">2022年7月学习计划</a>
                      <p>2022-07-02</p>
                  </div>
              </div>
              <div class="bb3">
                  <a href="#"><img src="@/assets/images/3.png"></a>
                  <div class="fd">
                      <a href="#">MybaitsPlus学习笔记</a>
                      <p>2022-06-22</p>
                  </div>
              </div>
              <div class="bb4">
                  <a href="#"><img src="@/assets/images/6.png"></a>
                  <div class="fd">
                      <a href="#">MybaitsPlus笔记(新版)</a>
                      <p>2022-06-28</p>
                  </div>
              </div>
              <div class="bb6">
                  <a href="#"><img src="@/assets/images/5.png"></a>
                  <div class="fd">
                      <a href="#">励志名言</a>
                      <p>2022-07-13</p>
                  </div>
              </div>
              <div class="bb2">
                  <a href="#"><img src="@/assets/images/4.png"></a>
                  <div class="fd">
                      <a href="#">クレヨンしんちゃん</a>
                      <p>2022-06-02</p>
                  </div>
              </div>
          </div>
          <div class="hid cl mb20">
              <div class="cc1">
                  <span class="iconfont ">&#xe63c;</span>
                  <i>分类</i>
                  <router-link  to="/classify" class="iconfont">&#xe665;</router-link>
              </div>
              <ul>
                      <router-link to="/classify/c">
                        <li>
                          <i class="fl">c语言</i>
                          <i class="fr">1</i>
                          </li>
                      </router-link> 
                      <router-link to="/classify/qianduan">
                         <li>
                          <i class="fl">前端学习</i>
                          <i class="fr">9</i>
                          </li>
                      </router-link>
            
                 
                      <router-link to="/classify/xuexi">
                         <li>
                          <i class="fl">学习计划</i>
                          <i class="fr">16</i>
                    </li>
                     </router-link>
                      <router-link to="/classify/shiyong">
                         <li>
                          <i class="fl">实用技术</i>
                          <i class="fr">4</i>
                          </li>
                      </router-link>
                     <router-link to="/classify/shiyong">
                         <li>
                          <i class="fl">实用技术</i>
                          <i class="fr">4</i>
                          </li>
                      </router-link>
                       <router-link to="/classify/shiyong">
                         <li>
                          <i class="fl">实用技术</i>
                          <i class="fr">4</i>
                          </li>
                      </router-link>
                       <router-link to="/classify/shiyong">
                         <li>
                          <i class="fl">实用技术</i>
                          <i class="fr">4</i>
                          </li>
                      </router-link>
                 
                      <router-link to="/classify/kaifa">
                        <li>
                          <i class="fl">开发基础</i>
                          <i class="fr">6</i>
                          </li>
                      </router-link>
                       <router-link to="/classify/kaifa">
                        <li>
                          <i class="fl">开发基础</i>
                          <i class="fr">6</i>
                          </li>
                      </router-link>
                 
                      <router-link to="/classify/wei">
                        <li>
                          <i class="fl">微服务核心</i>
                          <i class="fr">8</i>
                          </li>
                      </router-link>
           
                
                      <router-link to="/classify/lishi">
                        <li>
                          <i class="fl">日本历史</i>
                          <i class="fr">12</i>
                          </li>
                      </router-link>
           
                
                      <router-link to="/classify/riben">
                        <li>
                          <i class="fl">日本流行音乐史</i>
                          <i class="fr">8</i>
                          </li>
               </router-link>
              </ul>
          </div>
          <div class="dl mb20" style="padding: 15px; height: 450px;">
              <div class="dd1">
                  <span class="iconfont">&#xe612;</span>
                  <i>标签</i>
              </div>
              <a href="#">c语言</a><a href="#">JAVA</a><a href="#">ECMAScript</a>
              <a href="#" style="font-size: 24px;">Git</a><a href="#">JVM</a><a href="#"
                  style="font-size: 24px;">Python</a>
              <a href="#">SpringBoot</a><a href="#">Vue</a><a href="#">JVM</a>
              <a href="#">nginx</a><a href="#">citypop</a><a href="#">前端</a>
              <a href="#" style="font-size: 24px;">React</a><a href="#">netty</a><a href="#">Mybatis</a>
              <a href="#">Linux</a><a href="#">MVC</a><a href="#">axios</a>
              <a href="#">AJAX</a><a href="#">Spring</a><a href="#" style="font-size: 24px;">nodejs</a>
              <a href="#">实用技术</a><a href="#">idea</a><a href="#">postman</a>
              <a href="#">Webpack</a><a href="#" style="font-size: 24px;">leetcode</a>
          </div>
          <div class="cl mb20" style="height: 500px;">
              <div class="cc1">
                  <span class="iconfont ">&#xe60e;</span>
                  <i>归档</i>
                  <a href="#" class="iconfont">&#xe665;</a>
              </div>
              <ul>
                  <li>
                      <a href="#">
                          <i class="fl">八月 2022</i>
                          <i class="fr">5</i>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <i class="fl">七月 2022</i>
                          <i class="fr">1</i>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <i class="fl">六月 2022</i>
                          <i class="fr">16</i>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <i class="fl">五月 2022</i>
                          <i class="fr">4</i>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <i class="fl">四月 2022</i>
                          <i class="fr">6</i>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <i class="fl">三月 2022</i>
                          <i class="fr">8</i>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <i class="fl">二月 2022</i>
                          <i class="fr">9</i>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <i class="fl">一月 2022</i>
                          <i class="fr">12</i>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <i class="fl">十二月 2021</i>
                          <i class="fr">8</i>
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <i class="fl">十二月 2021</i>
                          <i class="fr">8</i>
                      </a>
                  </li>
              </ul>
          </div>
          <div class="gl mb20" style="height: 230px;">
              <div class="gg1">
                  <span class="iconfont">&#xe667;</span>
                  <i>网站咨询</i>
              </div>
              <div class="gg2">
                  <ul class="fl">
                      <li>文章数目：</li>
                      <li>注册至今：</li>
                      <li>总访客量：</li>
                      <li>最后更新时间：</li>
                  </ul>
                  <ul class="fr">
                      <li>61篇</li>
                      <li>6天</li>
                      <li>1675</li>
                      <li>1天前</li>
                  </ul>
              </div>
          </div>
      </div>
      </div>
      <div class="fl right" style="background-color:white">
        <h1>{{title}} 标题</h1>
        <div class="info">
          <div class="kind">原创</div>
            <a>Qian Miaomiao</a>
            <i class="iconfont icon-rili">于2022-08-19发布</i>
            <i class="iconfont icon-browse">1314</i>
            <div class="div1">
              <span>文章分类：<el-tag>标签一</el-tag></span>
              <span>文章标签：<el-tag>标签一</el-tag></span>
            </div>
        </div>
        <div class="content">
          component：用于动态组件，查看博文vue学习之组件。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ContentLeft from '../Home/ContentLeft.vue';
import store from '@/store';
export default {
    name: "",
    components: { ContentLeft },
    computed:{
      title(){
        return store.state.home.articleInfo.title
      },
      kind(){
        return store.state.home.articleInfo.kind
      },
      label(){
        return store.state.home.articleInfo.label
      },
      classify(){
        return store.state.home.articleInfo.classify
      },
      abstract(){
        return store.state.home.articleInfo.abstract
      },
    }
}
</script>

<style scoped>
.w1 {
  width: 1360px;
  margin: 0 auto;
  padding-top: 55px;
  height:2630px;
}
.lll{
  margin-top: 20px;
}

/* 内容左部分 */
.lll .al,
.bl,
.cl,
.dl,
.el,
.gl {
  /* border: 1px solid rgb(179, 177, 177); */
  width: 280px;
  height:410px;
  border-radius: 1%;
  /* box-shadow: 5px 5px 12px rgb(222, 221, 221); */
  text-align: center;
  padding-top: 15px;
  overflow: hidden;
  background-color: white;
  margin-bottom: 10px;
}

.al .aa1 img {
  margin-top: 15px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.aa1 img:hover {
  animation: rot_test 1s linear;
}

@keyframes rot_test {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.al h1 {
  font-size: 20px;
  margin-top: 10px;
}

.al i {
  display: block;
  font-size: 15px;
  margin-top: 5px;
  margin-bottom: 20px;
}

.al .aa2 {
  display: flex;
  justify-content: space-around;
}

.al .aa2 p {
  font-size: 15px;
}

.al button {
  margin-top: 25px;
  margin-bottom: 20px;
  width: 250px;
  height: 40px;
  background-color: skyblue;
  color: white;
  font-size: 18px;
}

.al button:hover {
  background-color: coral;
}

.al .aa3 .iconfont {
  font-size: 26px;
  margin-left: 10px;
  margin-right: 10px;
}

.al .aa3 .iconfont:hover {
  animation: move 1.2s linear;
  -webkit-animation: move 1.2s linear;
  display: inline-block;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.bl .bb1 {
  margin-left: -140px;
  margin-bottom: 13px;
  margin-top: 5px;
}

.bl .bb1 .iconfont {
  font-size: 25px;
}

.bl .bb1 i {
  font-size: 18px;
}

.bl img {
  float: left;
  width: 70px;
  height: 60px;
  margin-left: 25px;
}

.bl .fd {
  float: left;
  margin-top: 5px;
  margin-left: 10px;
  text-align: left;
}

.bl .fd a {
  font-size: 15px;
  ;
}

.bl p {
  color: gray;
}

.bl .bb2,
.bb3,
.bb4,
.bb5,
.bb6 {
  height: 80px;
}
.cl .cc1 {
  padding-left: 10px;
  margin-bottom: 13px;
}
.cl .cc1 .iconfont {
  font-size: 28px;
  margin-right: 5px;
}

.cl .cc1 i {
  font-size: 20px;
}

.cl .cc1 a {
  margin-left: 130px;
}
.hid ul{
  /* background-color: aquamarine; */
  height: 340px;
  width: 427px;
  overflow-y: scroll;
}
.cl ul li {
  margin-left: 25px;
  width: 240px;
  height: 42px;
  line-height: 42px;
  text-align: left;
  font-size: 16px;
  padding-right: 30px;
  transition: background-color 0.5s;
  transition: padding 0.8s;
  cursor: pointer;
  /* color:rgb(109, 108, 108) */
}

.cl ul li:hover {
  background-color: skyblue;
  padding: 0 15px 0 15px;
  border-radius: 5%;
}

.dl .dd1 {
  margin-left: -170px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.dl .dd1 .iconfont {
  font-size: 25px;
  margin-right: 5px;
}

.dl .dd1 i {
  font-size: 20px;
}

.dl a {
  display: inline-block;
  font-size: 16px;
  color: gray;
  margin-right: 14px;
  margin-bottom: 18px;
}

.gl .gg1 {
  margin-left: -140px;
  margin-bottom: 10px;
  margin-top: 15px;
}

.gl .gg1 .iconfont {
  font-size: 25px;
  margin-right: 5px;
}

.gl .gg1 text {
  font-size: 20px;
}

.gl .gg2 .fl li {
  font-size: 16px;
  text-align: left;
  padding-left: 30px;
  margin-bottom: 10px;
}

.gl .gg2 .fr li {
  font-size: 16px;
  text-align: right;
  padding-right: 30px;
  margin-bottom: 10px;

}
.gl .gg2 ul i {
  margin-left: 110px;
}
.gl .gg1 i{
  font-size: 20px;
}
.bl a:hover,
.dl a:hover {
  color: skyblue;
}
.bgc2 a{
  color: white;
}
   /* 图片经过放大 */
 img{
  transition: all 0.8s;
  overflow: hidden;
}
img:hover{
  transform: scale(1.1)
}
.right{
  padding: 25px;
  margin-left: 15px;
  width: 1065px;
  height: 2530px;
  /* background-color: skyblue; */
  border: 1px solid rgb(226, 224, 224);
  margin-top: 20px;
  border-radius: 0.3%;
}
.info{
  margin: 15px 0 15px 0;
  width: 1020px;
  height: 70px;
  background-color: #eaeaeb
}
.kind{
  /* float: left; */
  position: absolute;
  width: 50px;
  height: 35px;
  font-size: 16px;
  text-align: center;
  line-height: 35px;
  color: white;
  background-color: rgb(240, 126, 126);
  opacity: 0.6;
  border-radius: 20% 40% 40% 20% ;
}
.info a{
  display: inline-block;
  font-size: 17px;
  margin:5px 30px 5px 65px;
}
.info i{
  color: gray;
  font-size: 17px;
  margin-right: 15px;
}
.info .div1{
  font-size: 16px;
  color: gray;
  margin-left: 65px;
}
.info span{
  margin-right: 10px;
}
.content{

}
</style>